<template>
  <div>
    <div class="formleft">
      <div class="formleft-tel">
        <div class="formleft-tel-icon">
          <i class="iconfont icon-shouji"></i>
        </div>
        <div class="formleft-tel-input">
          <mt-field label="" placeholder="请输入手机号" v-model="formdata.tel" type="text">
          </mt-field>
        </div>
      </div>
      <div class="formleft-password">
        <div class="formleft-password-icon">
          <i class="iconfont icon-suo"></i>
        </div>
        <div class="formleft-password-input">
          <mt-field label="" placeholder="请输入6~16位字符密码" type="password" v-model="formdata.password"></mt-field>
        </div>
      </div>
      <p class="forget-password" @click="findPassword">忘记密码？
        <a>点击找回</a>
      </p>
      <mt-button type="primary" @click="loginP">登录</mt-button>
      <p class="association">
        <span @click="iconChange">
          <i class="iconfont icon-goufangxianxing" v-if="iconShow"></i>
          <i class="iconfont icon-wugoufangxianxing" v-else></i>
        </span>&nbsp; 我已阅读
        <router-link to="/registerassociation">《水珠钱包注册协议》</router-link>
      </p>
    </div>
  </div>
</template>
<script>
// 引入模态框
import { MessageBox } from 'mint-ui';
// 引入loading
import { Indicator } from 'mint-ui';
export default {
  name: 'password',
  data() {
    return {
      // 登录所需参数
      formdata: {
        tel: window.sessionStorage.getItem('phone') || '',
        password: ''
      },
      // 是否勾选协议
      iconShow: true
    }
  },
  watch: {
    // 监听手机号码变化，保存手机号码显示在输入框
    formdata: {
      //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
      handler(curVal, oldVal) {
        window.sessionStorage.setItem('phone',curVal.tel);
      },
      deep: true
    }
  },
  methods: {
    // 是否勾选协议
    iconChange() {
      this.iconShow = !this.iconShow;
    },
    // 调取访问流量接口
    getFoot() {
      // 记录次数
      // 访问类型(1首页浏览量,2首页bannar点击量,3注册登录点击量,4首页产品点击量,5推荐产品点击量,6详情分享点击量,7提前花点击量)
      let borrowerId = window.sessionStorage.getItem('borrowerId');
      let type = 3;
      let invData = {
        borrowerId: borrowerId,
        type: type
      }
      // 调用访问流量接口
      this.$http.post('/loansupermarket-app/personal/saveCustomerPlatformVisitInfo.do', invData)
        .then((response) => {
          var resBody = response.body;
          if (resBody.code == '000') {
            // console.log('访问记录已添加！');
          }
        });
    },
    // 登录
    loginP() {
      if (!this.iconShow) { //是否勾选水珠钱包协议
        MessageBox.alert('请先阅读水珠钱包注册协议~')
      } else if (!(/^1[34578]\d{9}$/.test(this.formdata.tel))) {   //正则判断手机号码是否正确
        MessageBox('提示', '请输入正确的手机号码~');
        return
      } else if (!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.formdata.password))) {   //正则判断密码是否符合规则（6~12位数字或字母组成）
        MessageBox('提示', '密码需由6~16位数字和字母组成~');
        return
      } else {
        //  密码登录参数
        let postData = {
          phone: this.formdata.tel,
          loginType: 1,
          password: this.formdata.password
        }
        // 登录接口
        Indicator.open('加载中···');
        this.$http.post('/loansupermarket-app/login/login', postData)
          .then((response) => {
            var resBody = response.body;
            if (resBody.code == '000') {
              // 登录成功后调取访问流量接口
              this.getFoot();
              setTimeout(function () {
                Indicator.close();
              }, 500)
              let borrowerId = resBody.result.borrowerId;
              // 手机号码和borrowerId存入session
              window.sessionStorage.setItem('tel', this.formdata.tel);
              window.sessionStorage.setItem('borrowerId', borrowerId);
              // 如果url带有platformId参数，那么跳转到贷款平台详情页，否则调到首页
             if(this.$route.query.platformId){
               this.$router.push({path:'/loanplatformdetail?platformId='+this.$route.query.platformId+'&&history='+1})
             }else if(this.$route.query.history&&this.$route.query.history==2){
               this.$router.push({ path: '/main/mine'});
             }else{
               this.$router.push({ path: '/main/home'});
             }
            } else {
              Indicator.close();
              MessageBox.alert(resBody.msg, '提示');
            }
          })
      }

    },
    // 点击找回密码，跳转到找回密码页面
    findPassword() {
      this.$router.push({ path: '/forgetpassword' })
    }
  }
}
</script>
<style lang="scss">
@import '../../scss/variable/base.scss';
.formleft {
  padding-top: 0.35rem;
  width: 90%;
  margin: 0 auto;
  &-tel {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 4px;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    &-icon {
      flex: 1.2;
      color: $iconColor;
    }
    &-input {
      flex: 10.8;
    }
  }
  &-password {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 4px;
    margin-top: 0.35rem;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    &-icon {
      flex: 1.2;
      color: $iconColor;
    }
    &-input {
      flex: 10.8;
    }
  }
  .forget-password {
    padding: 0;
    line-height: 1rem;
    font-size: 0.33rem;
    a {
      color: $primaryColor;
      text-decoration: underline;
    }
  }
  .mint-button {
    width: 9rem;
    height: 1.2rem;
  }
  .association {
    text-align: left;
    font-size: 0.33rem;
    i:nth-child(1) {
      color: #f15252;
      vertical-align: -3%;
      font-size: 0.36rem;
    }
    i:nth-child(2) {
      color: #f15252;
      vertical-align: -4%;
      font-size: 0.36rem;
    }
    a {
      color: $primaryColor;
      text-decoration: underline;
    }
  }
}

.mint-cell-wrapper {
  background-image: none;
}

.mint-cell:last-child {
  background-image: none;
}

.mint-cell-wrapper {
  padding: 0 10px 0 0;
}
</style>


